<template>
  <div class="wrapper">
    <div 
        class="icon"
        v-for="item of iconList"
        :key="item.id"
    >
      <div class="icon-img">
          <img class="img" :src="item.imgUrl" :class="[item.color]">
      </div>
      <div class="icon-desc">{{item.decs}}</div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'homeCatalog',
    data(){
        return{
            green:"green",
            orange:"orange",
            blue:"blue",
            pink:"pink",
            iconList:[
                {
                    id:'00001',
                    imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
                    decs:"本地热推",
                    color:"orange"
                },
                {
                    id:'00002',
                    imgUrl:'https://pic5.40017.cn/02/001/6d/db/rBLkCVmEGfeAVI4FAAAEXdabEDE534.png',
                    decs:"亲子游",
                    color:"blue"
                },
                {
                    id:'00003',
                    imgUrl:'https://pic5.40017.cn/01/000/84/4f/rBLkBVmLtaiAcmRaAAAEH9JbM6g234.png',
                    decs:"温泉热卖",
                    color:"green"
                },
                {
                    id:'00004',
                    imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
                    decs:"主题乐园",
                    color:"pink"
                }
            ]    
        }   
    }
}
</script>
<style lang="stylus" scoped>
.wrapper
    background:#fff
    padding-top:.2rem
    .icon
        width:25%
        float:left
        .img
            display:block
            background:red
            border-radius 1rem
            margin:0 auto
            width:50%
        .orange
            background:#FE9A2E
        .pink
            background:#F5A9D0
        .blue
            background:#5882FA
        .green
            background:#2EFE9A
        .icon-desc
            text-align:center
            padding-top:.2rem
            padding-bottom:.5rem
</style>
